<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目首页</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
    <style>
        html,
        body,
        .boss {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .boss {
            display: flex;
        }

        /* 头部布局 */
        .header {
            height: 60px;
            width: 100%;
            background: rgb(84, 92, 100);
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* 缩小比例 */
            flex-shrink: 0;
        }

        .header .image {
            display: flex;
            align-items: center;
        }

        .header span {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .header button {
            width: 69px;
            height: 35px;
            border: none;
            border-radius: 5px;
            background-color: #909399;
            margin-right: 50px;
            color: white;
        }

        .header ul li {
            height: 60px;
            line-height: 60px;
            width: 80px;
            text-align: center;
            color: white;
            box-sizing: border-box;
        }

        .header ul {
            display: flex;
            list-style: none;
        }

        .header ul li:hover {
            color: rgb(255, 208, 75);
            border-bottom: 4px solid rgb(255, 208, 75);
        }

        /* 下部分 */
        .box {
            height: 100%;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

        /* 左边 */
        aside {
            width: 200px;
            height: 100%;
            background-color: #fff;
            overflow: auto;
        }

        aside ul li {
            height: 56px;
            line-height: 56px;
            font-size: 14px;
            color: #303133;
            padding: 0 20px;
            list-style: none;
        }

        aside ul li:hover {
            color: teal;
            background-color: rgb(160, 226, 226, 0.3);
        }

        /* 右边 */
        main {
            flex: 1;
            height: 100%;
            background-color: #eaedf1;
            overflow: auto;
            padding: 15px;
        }

        a {
            text-decoration: none;
            color: teal;
        }

        /* 头部 */
        header {
            height: 75px;
            display: flex;
            justify-content: space-around;
        }

        header .boss {
            background-color: white;
            padding: 10px;
            width: 21%;
            height: 75px;
            display: flex;
            align-items: center;
            justify-content: start;
        }

        header .boss img {
            height: 40px;
            width: 40px;
            /* margin-left: 50px; */
        }

        header .boss .zi {
            margin-left: 10px;
        }

        header .boss .zi span {
            font-size: 13px;
            color: #6c757d;
        }

        header :hover {
            box-shadow: 0 0 10px rgb(125, 125, 125, 0.5);
        }


        /* 中间 */
        .content {
            margin-top: 50px;
            display: flex;
            justify-content: space-around;
        }

        .content .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 48%;
        }

        .content .left .top {
            height: 48%;
            background-color: white;
            box-shadow: 0 0 2px #ddd;
        }

        .content .left .top .head1 {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ebeef5;
            padding: 10px;
        }

        .content .left .top .box {
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }

        .content .left .top .box .zi {
            width: 17%;
            height: 85px;
            border-radius: 5px;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .content .left .top .box .zi span {
            margin-top: 5px;
            font-size: 15px;
            color: #6c757d;
        }

        /* 划过变色 */
        .content .left .top .box .zi:hover {
            background: rgb(184, 184, 184);
        }

        .content .left .bottom {
            height: 48%;
            background-color: white;
            box-shadow: 0 0 2px #ddd;
        }

        .content .left .bottom .box .zi {
            width: 15%;
            height: 85px;
            border-radius: 5px;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .content .right {
            width: 48%;
            height: 350px;
            background-color: white;
            box-shadow: 0 0 2px #ddd;
        }

        /* 尾部 */
        .footer {
            margin-top: 50px;
            display: flex;
            justify-content: space-around;
        }

        .footer .left {
            width: 48%;
            height: 300px;
            background: white;

        }

        .footer .left .tab {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding: 20px
        }

        .footer .left .tab table {
            width: 90%;
            margin-top: 20px;
        }

        .footer .right {
            width: 48%;
            background: white;
            overflow: hidden;
        }

        .footer .right .tab table {
            overflow-y: auto;
        }

        .footer .right .tab table tr {
            height: 50px;
            overflow: auto;
        }

        .footer .right .tab table tr:hover {
            background-color: #ebeef5;
        }

        .footer .left .head1 {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ebeef5;
            padding: 10px;
        }



        .ll {
            height: 105px;
        }
    </style>
</head>

<body>
    <!-- 头部布局 -->
    <div class="header">
        <div class="image">
            <span>
                UNI-ADMIN
            </span>
        </div>
        <ul>
            <li>首页</li>
            <li>商品</li>
            <li>订单</li>
            <li>会员</li>
            <li>设置</li>
            <li>测试</li>
        </ul>
    </div>
    <!-- 下部 -->

    <div class="box">
        <!-- 侧边栏 -->
        <aside>
            <ul>
                <li>后台首页</li>
                <li>商品管理</li>
                <li>商品列表</li>
            </ul>
        </aside>
        <!-- 右边内容 -->
        <main>
            <!-- 头部 -->
            <header>
                <div class="boss">
                    <img src="./img/1.jpg" alt="">
                    <div class="zi">
                        <h2>30</h2>
                        <span>关注人数(个)</span>
                    </div>
                </div>
                <div class="boss">
                    <img src="./img/2.png" alt="">
                    <div class="zi">
                        <h2>120</h2>
                        <span>订单总数(笔)</span>
                    </div>
                </div>
                <div class="boss">
                    <img src="./img/3.png" alt="">
                    <div class="zi">
                        <h2>4183.80</h2>
                        <span> 今日订单总金额(元)</span>
                    </div>
                </div>
                <div class="boss">
                    <img src="./img/4.png" alt="">
                    <div class="zi">
                        <h2> 100</h2>
                        <span>本月销量(笔)</span>
                    </div>
                </div>
            </header>

            <div class="content">
                <!-- 左边 -->
                <div class="left">
                    <!-- 上边 -->
                    <div class="top">
                        <div class="head1">
                            <span>店铺及商品提示</span>
                            <a href="#">需要关注的店铺信息及待处理事项</a>
                        </div>
                        <div class="box">
                            <div class="zi">
                                <h2>66</h2>
                                <span>出售中</span>
                            </div>
                            <div class="zi">
                                <h2>4</h2>
                                <span>待回复</span>
                            </div>
                            <div class="zi">
                                <h2>0</h2>
                                <span>库存预警</span>
                            </div>
                            <div class="zi">
                                <h2>3</h2>
                                <span>仓库中</span>
                            </div>
                        </div>
                    </div>
                    <!-- 下边 -->
                    <div class="bottom top">
                        <div class="head1">
                            <span>交易提示</span>
                            <a href="#">需要立即处理的交易订单</a>
                        </div>
                        <div class="box">
                            <div class="zi">
                                <h2>0</h2>
                                <span>待付款</span>
                            </div>
                            <div class="zi">
                                <h2>10</h2>
                                <span>待发货</span>
                            </div>
                            <div class="zi">
                                <h2>0</h2>
                                <span>已发货</span>
                            </div>
                            <div class="zi">
                                <h2>3</h2>
                                <span>已收货</span>
                            </div>
                            <div class="zi">
                                <h2>3</h2>
                                <span>退款中</span>
                            </div>
                            <div class="zi">
                                <h2>3</h2>
                                <span>待售后</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="right">
                    <div id="main" style="width: 500px;height:310px;"></div>
                </div>
            </div>

            <!-- 尾部 -->
            <div class="footer">
                <!-- 左边 -->
                <div class="left">
                    <div class="head1">
                        <span>销售情况统计</span>
                        <a href="#">按周期统计商家店铺的订单量和订单金额</a>
                    </div>

                    <div class="tab">
                        <table border="1px" bordercolor="#ebe00ef5" cellspacing="0">
                            <tr>
                                <td rowspan="2" bgcolor="#f8f9fa" width="100px" height="70px" align="center">昨日销量</td>
                                <td> &emsp;订单金额(元) 12</td>
                            </tr>
                            <tr>
                                <td>&emsp;订单量(件) 12</td>
                            </tr>
                        </table>

                        <table border="1px" bordercolor="#ebeef5" cellspacing="0">
                            <tr>
                                <td rowspan="2" bgcolor="#f8f9fa" width="100px" height="70px" align="center">本月销量</td>
                                <td> &emsp;订单金额(元) 12</td>
                            </tr>
                            <tr>
                                <td>&emsp;订单量(件) 12</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="right left">
                    <div class="head1">
                        <span>单品销售排名</span>
                        <a href="#">按周期统计商家店铺的订单量和订单金额</a>
                    </div>
                    <div class="tab">
                        <table border="1px" bordercolor="#ebeef5" cellspacing="0">
                            <tr>
                                <td width="70px" height="45px">#</td>
                                <td>商品信息</td>
                                <td width="70px">销量</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>
                                    小天鹅（LittleSwan）滚筒洗衣机...
                                </td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>
                                    小天鹅（LittleSwan）滚筒洗衣机...
                                </td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>
                                    小天鹅（LittleSwan）滚筒洗衣机...
                                </td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>
                                    小天鹅（LittleSwan）滚筒洗衣机...
                                </td>
                                <td>9</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>
                                    小天鹅（LittleSwan）滚筒洗衣机...
                                </td>
                                <td>9</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="ll" style="margin-bottom:50px"></div>
        </main>
    </div>
    <script>

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: 'Stacked Area Chart'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        option && myChart.setOption(option);

    </script>

</body>



</html>